<template>
	<div class="container">
		<router-link tag="div" class="nav-item" v-for="(list,index) in lists" :to="{name:list.to}" :key="index">
			<i :class="['iconfont',list.type]"></i>
			<span>{{list.name}}</span>
		</router-link>
	</div>
</template>

<script>
export default {
  name: 'nav',
  data () {
    return {
    	lists:[
    		{	
    			to:'mylesson',
    			type:'icon-iconfontlesson',
    			name:'我的课程'
    		},{
    			to:'myvideo',
    			type:'icon-video2',
    			name:'我的视频'
    		},{
    			to:'invitefriends',
    			type:'icon-woshou',
    			name:'邀请好友'
    		},{
    			to:'afterlogin',
    			type:'icon-my',
    			name:'个人中心'
    		}
    	]
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
	display: flex;
	justify-content: space-around;
	padding: 0.37037rem 0;

	.nav-item{
		display: flex;
		flex-direction:column;
		align-items:center;
		
		i{
			font-size: 0.600741rem;
		}

		&:nth-child(1) i{
			color:#5eb5ff;
		}

		&:nth-child(2) i{
			color:#ff807f;
		}

		&:nth-child(3) i{
			color:#fca02f;
		}

		&:nth-child(4) i{
			color:rgb(22,234,230);
		}

		span{
			font-size: 0.37037rem;
			margin-top: 0.185185rem;
			color: #333;
		}
	}
}

</style>